<template>
	<view>
		<view :style="{ paddingBottom: 120 + 'rpx' }" class="safearea"></view>
		<view class="tab-bar-list" v-if="isLoginType==2">
			<view class="tab" v-for="(item,i) in tabItems" :key="i" :class="currentIndex == i ? 'active' : ''"
				@click="onTabClick(i)">
				<view class="icon">
					<image :src="currentIndex == i?item.selectedIcon:item.icon" mode="aspectFit"></image>
				</view>
				<view class="tab-title">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="tab-bar-list" v-if="isLoginType==1">
			<view class="tab" v-for="(item,i) in tabItems2" :key="i" :class="currentIndex == i ? 'active' : ''"
				@click="onTabClick(i)">
				<view class="icon">
					<image :src="currentIndex == i?item.selectedIcon:item.icon" mode="aspectFit"></image>
				</view>
				<view class="tab-title">
					{{item.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		components: {},
		props: {
			currentIndex: {
				type: Number,
				default: 0
			},
		},

		data() {
			return {
				tabItems: [{
						pagePath: "/pages/home/home",
						icon: "/static/images/nav1.png",
						selectedIcon: "/static/images/nav1-active.png",
						text: "首页",
						isHow: true,
					},
					{
						pagePath: "/pages/technician/technician",
						icon: "/static/images/nav2.png",
						selectedIcon: "/static/images/nav2-active.png",
						text: "技师",
						isHow: true,
					},
					{
						pagePath: "/pages/service/service",
						icon: "/static/images/nav3.png",
						selectedIcon: "/static/images/nav3-active.png",
						text: "服务",
						isHow: true,
					},
					{
						pagePath: "/pages/my/my",
						icon: "/static/images/nav4.png",
						selectedIcon: "/static/images/nav4-active.png",
						text: "我的",
						isHow: true,
					}
				],
				tabItems2: [{
						pagePath: "/pages/home/home",
						icon: "/static/images/nav1.png",
						selectedIcon: "/static/images/nav1-active.png",
						text: "首页",
						isHow: true,
					},
					{
						pagePath: "/pages/course/course",
						icon: "/static/images/nav3.png",
						selectedIcon: "/static/images/nav3-active.png",
						text: "课程",
						isHow: true,
					},
					{
						pagePath: "/pages/my/my",
						icon: "/static/images/nav2.png",
						selectedIcon: "/static/images/nav2-active.png",
						text: "个人中心",
						isHow: true,
					},
				],
				color: '#666',
				safeareaHeight: 2,
				// isLoginType: 0, //登录类型

			}
		},
		onLoad() {
		},
		onShow() {
		},
		computed: {
			...mapState(['isLoginType']),
			isLoginType() {
				return this.$store.state.isLoginType
			}
		},

		watch: {
			isLoginType(newVal, oldVal) {
				// if (this.$store.state.isLoginType == 1 && this.currentIndex == 0) {
				// 	setTimeout(() => {
				// 		uni.switchTab({
				// 			url: '/technicianPages/home/home'
				// 		})
				// 	}, 1000)
				// }
			}
		},

		mounted() {

			// 使用watch来监听count的变化

		},
		methods: {
			onTabClick(index) { // 切换tab的函数，当选中某个tab时触发
				if (index != this.currentIndex) {
					let item = this.isLoginType == 1 ? this.tabItems2[index] : this.tabItems[index]
					uni.switchTab({
						url: item.pagePath
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.tab-bar-list {
		display: flex;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 100rpx;
		background: #fff;

		.tab {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #666;

			.icon {
				width: 44rpx;
				height: 44rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&.active {
				color: #00c6c3;
			}
		}
	}
</style>